// 方式1：代码嵌入
<template>
    <div>
        <!-- 头部 -->
        <Header/>
        <!-- 主体 -->
        <div class="main">
            <!-- 添加代码 -->

            <!-- 地图 -->
            <div id="container" style="width:100%;height:100%"></div>

            <!-- 图表 -->
            <div class="chart-box">
                <ChartBox/>
            </div>
            
            <!-- 菜单 -->
            <div class="menu">
                <el-button-group>
                    <el-button v-for="(item,index) in menuList" :key="index" @click="clickLayer(item)" size="medium"  :class="curMapDrawActive ==item.id ? 'active':''">{{item.name}}</el-button>
                </el-button-group>
            </div>
            
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
import ChartBox from '@/components/Chart/ChartBox.vue'

export default {
    components:{
        Header,
        ChartBox
    },
    data(){
        return{
             menuList:[
                {id:'1',name:'菜单1'},
                {id:'2',name:'菜单2'},
                {id:'3',name:'菜单3'}
            ],
            curMapDrawActive:1,
            map: null
        }
       
    },
    methods:{
        clickLayer(obj){
            this.curMapDrawActive = obj.id
        }
    },
    mounted(){
        this.map = new AMap.Map('container', {
          mapStyle: 'amap://styles/dark',
          center:[116.867428, 39.79],
          zoom:11
        });
    }
}
</script>

<style lang="stylus" scoped>
.main
    height 100%
.chart-box
    height 100%
.menu
    position absolute
    left 10px
    top 100px

    .el-button
        background: #303a58;
        border: 1px solid #303a58;
        color: #c0c4cc; 

    .el-button:hover,.el-button.active
        color #13ffd7
</style>
